<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import type { CatalogueItem } from '@/types/home'
import { postFavorateAPI } from '@/services/home'
import { baseURL, baseURL_noapi, downloadSyncFile } from '@/utils/http'

const checked = ref<any>(false)
const state = reactive({
  name: '',
  charge_type: '限时免费',
  resource_id: 0,
  grade: '',
  image_src: '',
  date: '',
})
onLoad((option: any) => {
  console.log('父组件页面加载', option)
  state.resource_id = option.id
  state.grade = option.grade
  state.charge_type = option.charge_type
  state.date = option.date
  state.image_src = option.image_src
})
// 修改时间格式，取前面的年月
const shortTime = (time: string) => {
  return time.slice(0, 7)
}
// 处理收藏
const onClickFavorate = async () => {
  const params = {
    resource_id: state.resource_id,
  }
  const res = await postFavorateAPI(params)
  checked.value = res.results
}
// 开通会员
const onClickbuyVIP = () => {
  uni.switchTab({
    url: `/pages/goods/buy`,
  })
}
// 立即下载
const onClickDownload = async () => {
  console.log('开始下载')
  let params = { resource_id: state.resource_id, image_src: state.image_src }
  const result = await downloadSyncFile(
    baseURL + '/ResourceViewSet/get_file/',
    'download.pdf',
    params,
  )
}
</script>

<template>
  <view class="container">
    <view class="header">
      <view class="two_item">
        <uni-icons type="calendar" size="20"></uni-icons>
        <text style="font-size: small; color: dimgray">{{ shortTime(state.date) }}</text>
        <text style="font-size: small; color: darkgreen">{{ state.charge_type }}</text>
      </view>
      <view class="resource_title">
        <text>{{ state.name }}</text>
      </view>
      <view
        class="image"
        :style="{
          width: '750rpx',
          height: '900rpx',
          backgroundImage: `url(${state.image_src})`,
          backgroundSize: 'cover',
        }"
      ></view>
    </view>
    <view class="text">
      <text v-if="state.charge_type != '限时免费'">--预览已结束，开通会员可下载</text>
    </view>
    <view class="button">
      <button class="mini-btn" type="warn" size="mini" @click="onClickbuyVIP">开通会员</button>
      <button class="mini-btn" type="primary" size="mini" @click="onClickDownload">立即下载</button>
    </view>
    <view class="button">
      <view>
        <button class="mini-btn" size="mini">联系客服</button>
      </view>
      <view>
        <uni-fav :checked="checked" @click="onClickFavorate" />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.two_item {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: flex-start;
}
.body {
  display: flex;
  flex-direction: column;
  margin: 4rpx;
  .body_item {
    display: flex;
    flex-direction: row;
    margin: 3rpx 3rpx 0rpx 3rpx;
    font-size: small;
    justify-content: flex-start;
    align-items: flex-end;
  }
}
.left {
  width: 30%;
}
.right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 68%;
}
.two_text {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
}
.text_time {
  color: rgb(235, 134, 11);
}
.text_charge {
  color: rgb(1, 25, 92);
}
.text_publish {
  color: rgb(15, 54, 6);
}
.text_download {
  color: rgb(65, 57, 57);
}
.text_name {
  font-weight: bolder;
}
</style>
